﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta name="format-detection" content="telephone=no"/>
    <meta content="no-cache" http-equiv="pragma">
    <meta content="no-cache" http-equiv="cache-control">
    <meta content="0" http-equiv="expires">
    <title>产业工人</title>
    <link href="/static/css/css.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_604168_f9k6jicefq63l3di.css">
    <link rel="stylesheet" href="/static/mui/css/mui.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">-->

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <style>

        .de_li .xingxing img {
            height: 10px;
            width: 10px;

        }

        .workerLst {
            margin-top: 0px !important;
        }

        .workerBox {
            top: 40px;
        }
        .workerLst .tBody li img {
            /* margin-right: 0.215rem; */
            margin-right: 0px !important;
        }
        .workerLst .tBody li p{
            border: none;
        }

    </style>
</head>
<body style="background-color: #f4f4f4">

<!--头部开始-->
<header class="head headTitle">
    <a class="back" href="#" onclick="history.back()">
        <img src="/static/images/back_gray.png" alt="返回">
    </a>
    <h1 class="title" style="margin-top: 3.5%;">产业工人</h1>
</header>
<!--头部结束-->
<div id="app">
    <section class="workerBox" id="workerBox">
        <!--工人信息列表开始-->
        <div class="workerLst" style="margin-top: 147px;display: block;">
            <ul id="tBody" class="tBody" style="margin-top: 10px;display: block;background-color: #f4f4f4">

                <a id="detail" href="#middlePopover" v-for="(item,index) in items" >
                    <li class="de_li" :data_id="item.uid" style="background-color: #fff;margin-bottom: 5px">
                        <div class="mui-row">
                            <div class="mui-col-sm-4 mui-col-xs-4">
                                <p>
								<span class="pic">
									<img :src="item.avatar2">
								</span>
                                    {{item.truename}}
                                </p>
                            </div>
                            <div class="mui-col-sm-2 mui-col-xs-2">
                                <p style="padding-left: 15px">{{item.gongzhong}}</p>
                            </div>
                            <div class="mui-col-sm-3 mui-col-xs-3">
                                <p>{{item.renzhenghao}}</p>
                            </div>
                            <div class="mui-col-sm-3 mui-col-xs-3">
                                <p class="xingxing" style="text-align: center">
                                    <img src="/static/images/star.png">
                                    <img src="/static/images/star.png">
                                    <img src="/static/images/star.png">
                                    <!--<img src="/static/images/star.png">-->
                                    <!--<img src="/static/images/star.png">-->
                                </p>
                            </div>
                        </div>
                    </li>
                </a>


            </ul>
        </div>
        <!--工人信息列表结束-->

        <!--工人查询开始-->
        <div class="workerSearch">
            <form action="/workerInfo/" id="caseQuery">
                <input name="category" type="hidden">
                <div class="box">
                    <!--<div class="top">-->
                        <!--<div class="searchWrap">-->
                            <!--<input type="text" style="margin-bottom: 0px" name="name" placeholder="请输入姓名" value="">-->
                            <!--<button id="searchButton" style="height: 40px;">查询</button>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="workerLst">
                        <div class="tHead">
                            <ul>
                                <li>姓名</li>
                                <li>
                                    <a id="workType" href="javascript:void('');">工种
                                        <span id="jtx" class="gr gr-jiantouxia" style="margin-left: 3px"></span>
                                        <span id="jts" class="gr gr-jiantoushang"
                                              style="display: none;margin-left: 3px"></span>
                                    </a>
                                </li>
                                <li>认证号</li>
                                <li>星级</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!--工人查询结束-->

        <!--顶部筛选开始-->
        <div id="workType_slt" class="selectDown" style="top:90px">
            <!--选择工种-->
            <ul id="workType_ul">
                <li class="workType_li" onclick="getWorkerType()">拆除工</li>
                <li class="workType_li" onclick="getWorkerType()">木工</li>
                <li class="workType_li" onclick="getWorkerType()">地板工</li>
                <li class="workType_li" onclick="getWorkerType()">油工</li>
                <li class="workType_li" onclick="getWorkerType()">水电工</li>
                <li class="workType_li" onclick="getWorkerType()">找平工</li>
                <li class="workType_li" onclick="getWorkerType()">安装工</li>
                <li class="workType_li" onclick="getWorkerType()">瓦工</li>
                <li class="workType_li" onclick="getWorkerType()">保洁保护工</li>
                <li class="workType_li" onclick="getWorkerType()">台面工</li>
                <li class="workType_li" onclick="getWorkerType()">壁布工</li>
                <li class="workType_li" onclick="getWorkerType()">吊顶工</li>
                <li class="workType_li" onclick="getWorkerType()">壁纸工</li>
                <li class="workType_li" onclick="getWorkerType()">辅助工</li>
                <li class="workType_li" onclick="getWorkerType()">维修工</li>
                <li class="workType_li" onclick="getWorkerType()">木作工</li>
            </ul>
        </div>
        <!--顶部筛选结束-->

        <!--工人名片开始-->
        <!--<div class="workerPop" style="display: none;">-->
            <!--<div class="workerPopWrap">-->
                <!--<div class="workerPopInner">-->
                    <!--<div class="workerCard">-->
                        <!--<div class="hd">-->
                            <!--<div class="pic">-->
                                <!--<img src="https://imgs.ikongjian.com//uc/workers/4096-201803211151042.jpg">-->
                            <!--</div>-->
                            <!--<div class="info">-->
                                <!--<div class="name">{{tcdata.name}}</div>-->
                                <!--<p><span>工   种</span><b id="gz_t">{{tcdata.type}}</b></p>-->
                                <!--<p><span>工   龄</span><b id="gl_t">15年</b></p>-->
                                <!--<p><span>年   龄</span><b id="nl_t">45岁</b></p>-->
                                <!--<p><span>认证号</span><b id="rzh_t">{{tcdata.renzhenghao}}</b></p>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="fot">-->
                            <!--<p id="xj_t">-->
                                <!--<span>星级</span>-->
                                <!--<img src="/static/images/star.png" alt="">-->
                                <!--<img src="/static/images/star.png" alt="">-->
                                <!--<img src="/static/images/star.png" alt="">-->
                            <!--</p>-->
                            <!--<p id="fwkfs_t">-->
                                <!--<i>&nbsp;</i>-->
                                <!--<span>服务客户数</span>-->
                                <!--<b>2</b>-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--&lt;!&ndash;<button class="close"></button>&ndash;&gt;-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--工人名片结束-->

        <div id="listend">

        </div>


        <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>

        <div class="weui-cells__title"  v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>

    </section>
</div>


<script>

//    以下为参考示例
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 10,
        }
    });

    //滚动加载更多
    $(function () {
        //进入加载页面
        loadlist();
    });

    $("#workerBox").infinite().on('infinite', function () {
        console.log("加载")
        loadlist();
    });

    //ajax加载数据
    function loadlist() {

        if(!app.is_loading&&app.is_none!=true){
            app.is_loading = true;
            $.post('loaddata', {page: app.cur_page, limit: app.limit}, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0) {
                    $('.workerLst').show();
                    app.cur_page++;
                    for(var index in res.data){
                        app.items.push(res.data[index]);
                    }
//                app.items=res.data;
                } else {
                    app.is_none = true;
                }

            });
        }

    }

</script>


<script>
    $(function () {
        $('#workType').click(function () {
            $('#workType_slt').toggle();
            if ($('#workType_slt').css("display") == "none") {
                $('#jts').hide();
                $('#jtx').show();
            }
            if ($('#workType_slt').css("display") == "block") {
                $('#jts').show();
                $('#jtx').hide();
            }

        })
    })
</script>
<script>
    $(function () {
        $('#workType_slt').click(function () {
            $('#workType_slt').toggle();
            if ($('#jts').show()) {
                $('#jts').hide()
                $('#jtx').show();
            }
        })
    })
</script>
<script>
    function getWorkerType() {
        $(document).ready(function () {
            $('ul#workType_ul').on('click', 'li', function () {
                var text = $(this).text();
                console.log(text);
                var wokerType = "";

                $.ajax({
                    url: 'shaixuan',
                    type: 'post',
                    data: {'type': text},
                    dataType: 'json',
                    success: function (data) {
                        for (var k in data) {
                            wokerType = wokerType + "<a id=\"detail\" href=\"#middlePopover\" >\n" +
                                "\t\t\t\t<li class=\"de_li\"" + "data_id=" + data[k].id + ">\n" +
                                "\t\t\t\t\t<div class=\"mui-row\">\n" +
                                "\t\t\t\t\t\t<div class=\"mui-col-sm-4 mui-col-xs-4\">\n" +
                                "\t\t\t\t\t\t\t<p>\n" +
                                "\t\t\t\t\t\t\t\t<span class=\"pic\">\n" +
                                "\t\t\t\t\t\t\t\t\t<img src=\"/static/images/6912-201710091022017.jpg\">\n" +
                                "\t\t\t\t\t\t\t\t</span>\n" +
                                "\t\t\t\t\t\t\t\t" + data[k].name + "\n" +
                                "\t\t\t\t\t\t\t</p>\n" +
                                "\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t<div class=\"mui-col-sm-3 mui-col-xs-3\">\n" +
                                "\t\t\t\t\t\t\t<p style=\"padding-left: 15px\">" + data[k].type + "</p>\n" +
                                "\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t<div class=\"mui-col-sm-3 mui-col-xs-3\">\n" +
                                "\t\t\t\t\t\t\t<p>" + data[k].renzhenghao + "</p>\n" +
                                "\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t<div class=\"mui-col-sm-2 mui-col-xs-2\">\n" +
                                "\t\t\t\t\t\t\t<p class=\"xingxing\">\n" +
                                "\t\t\t\t\t\t\t\t<img src=\"/static/images/star.png\">\n" +
                                "\t\t\t\t\t\t\t\t<img src=\"/static/images/star.png\">\n" +
                                "\t\t\t\t\t\t\t\t<img src=\"/static/images/star.png\">\n" +
                                "\t\t\t\t\t\t\t</p>\n" +
                                "\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t</div>\n" +
                                "\t\t\t\t</li>\n" +
                                "\t\t\t</a>"
                        }
                        $('#tBody').html(wokerType);
                    }
                })
            })
        })
    }
</script>


<!--弹窗数据展示-->
<script>

    $(document).on('click', '.de_li', function () {

        var data_id = $(this).attr('data_id');
        console.log($(this).attr('data_id'));
//        $.ajax({
//            url: 'getgrdata',
//            type: 'post',
//            data: {'tcd': data_id},
//            dataType: 'json',
//            success: function (data) {
//                ve.tcdata = data;
//                console.log(data + 'aaaa');
//                $('.workerPop').show();
//            },
//            error: function (data) {
//                data.error();
//            }
//        })


    });
    $(document).on('click', '.workerPop', function () {
        $('.workerPop').hide();
    });
</script>

<script src="/static/mui/js/mui.js"></script>

</body>
</html>
